<template>
  <div class="inspection" v-loading="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(100, 100, 100, 0.8)">
      <div class="header"> 
        <!-- <p><i class="el-icon-printer scan-QR" @click="scanQRCode"></i><br><span class="scan-hint">扫一扫</span></p> -->
        <p><img class="el-icon-printer scan-QR" @click="scanQRCode" src="../assets/img/scan_qrcode.png"></p>

        <el-tabs id="eltabsproduct" class="inspe-content" v-model="activeName"  stretch='stretch' @tab-click="handleClick(activeName)">
            <el-input placeholder="请输入搜索内容" prefix-icon="el-icon-search" v-model="input"></el-input>
            <el-tab-pane :label="item.label" :name="item.name" v-for="(item,index) in tabList" :key='index'>
                <div class="show-list-product">
                    <ul v-for="(item0,index) in item.inspectProduct" :key='index' class="product-list" @click.stop="toDetail(item0.id,item0.statusId)">
                        <li>
                            <span class="firstSpanProduct">{{item0.customerName || '--'}}</span>
                            <span class="statusName mlcfont">{{item0.statusName}}</span>
                        </li>
                        <li>{{item0.productName || '--'}}
                        </li>
                        <li class="text-descritption">{{item0.description || '--'}}</li>
                    </ul>  
                </div>
            </el-tab-pane>            
        </el-tabs>
      </div>
  </div>
</template>

<script>
    export default {
    name: 'inspection',
    data() {
        return {
            loading:false,
            activeName: 'first',
            stretch:true,
            tabList:[
                {
                    label:'已办',
                    name:'first',
                },
                {
                    label:'代办',
                    name:'second',
                },
                {
                    label:'全部',
                    name:'third',
                }             
            ],         
            //搜索框
            input: ''
        }
    },
    mounted: function(){
        this.handleClick('first');
        localStorage.setItem("pageId",0);
    },
    methods: {
      handleClick:function(labelnum) {
        //this.loading = true;
        let paramfetch={                
            "pageSize":10,
            "page":1,
            "searchMap":{
                "queryStatus":"",
            }                
        }
        if(labelnum=='first'){
            paramfetch.searchMap.queryStatus='CHECKED';
        }else if(labelnum=='second'){
            paramfetch.searchMap.queryStatus='UNCHECK';
        }else{
            paramfetch.searchMap.queryStatus='CHECKALL';
        }
        this.$fetch(this.$root.domainIp+'maintain/apporder',{param:this.encrypt(JSON.stringify(paramfetch))})
        .then((response) => {
            //this.loading = false;
            if(response.code == 0){
                let json_data = JSON.parse(this.decrypt(response.data));
                if(labelnum=='first'){
                    this.tabList[0].inspectProduct=json_data.data;
                    console.log(json_data.data)
                }else if(labelnum=='second'){
                    this.tabList[1].inspectProduct=json_data.data;
                    console.log(json_data.data)
                }else{
                    this.tabList[2].inspectProduct=json_data.data;
                    console.log(json_data.data)
                }
            }else{
                _this.$message({
                    message:(response.message || '请检查网络是否连接'),
                    center: true
                });
            }
            
        })
        .catch(function (error) {
            this.loading = false;
            console.log(error);
            _this.$message({
                message:('请检查网络是否连接'),
                center: true
            });
        });
      },
      toDetail:function(id,statusId){
        localStorage.setItem("detailId",id);
        localStorage.setItem("statusId",statusId);
        // 路由跳转
        this.$router.push({
            path:'/inspectionbillDetail'
        })
      },
      scanQRCode:function(){
        let id = 4;
        let _this = this;
        this.$fetch(this.$root.domainIp+'maintain/apporder/isOrderExist/'+id)
        .then((response) => {
            // this.loading = false;
            if(response.code == 0){
                localStorage.setItem("detailId",id);
                // 路由跳转
                this.$router.push({
                    path:'/inspectionbillDetail'
                })
            }else{
                _this.$message({
                    message:(response.message || '请检查网络是否连接'),
                    center: true
                });
            }
        })
        .catch(function (error) {
            console.log(error);
            this.$message({
                message:('请检查网络是否连接'),
                center: true
            });
        });

      }
    }
    }
</script>

<style>
    .inspection{
    width: 90%;
    padding-left: 5%;
    padding-right: 5%;
    padding-top: 5%;
    color: #646464;
    font-size: 0.28rem;
    }
    .inspection #eltabsproduct{
        margin-bottom: 1rem;
    }
    .footer{
        width: 100%;
        position: fixed;
        left: 0;
        bottom: 0;
    }
    .inspection .header,.show_all_product{
        height: 0.66rem;
    }
    .inspection .product-list{
        text-align:left;
        padding-top: 0.2rem;
        padding-bottom: 0.3rem;
        border-bottom: 0.01rem solid #cccccc;
    }
    .scan-QR{
        position: absolute;
        left: 5%;
        top: 3%;
        width: 0.7rem;
    }
    .scan-hint{
       position: fixed;
       left: 5%;
       top: 7%;
    }
    .inspection .product-list li{
        /* height:0.44rem; */
        /* line-height: 0.44rem; */
        margin-top: 0.2rem;
        /* margin: 0 0; */
        padding:0 5%;
    }
    .inspection .el-col {
        border-radius: 0.08rem;
    }
    .bg-purple-dark {
        background: #99a9bf;
    }
    .bg-purple {
        background: #d3dce6;
    }
    .bg-purple-light {
        background: #e5e9f2;
    }
    .grid-content {
        border-radius: 0.08rem;
        min-height: 0.4rem;
    }
    .row-bg {
        padding: 0.2rem 0;
        /* background-color: #f9fafc; */
    }
    .el-tabs__item.is-active{
        color: #ff5000;
    }
    .el-tabs__active-bar{
        background: #ff5000;
    }
    .inspe-content .el-tabs__header{
        width: 85%;
        margin-left: 15%;
    }
    .inspection li{
        /* position: relative; */
    }
    .inspection .statusName{
      float: right;
      /* position: absolute;
      right: 5%;
      top: 135%; */
    }
    .inspection .show-list-product{
        margin-bottom: 1.3rem;
        -webkit-overflow-scrolling: touch;
    }
    .inspection .text-descritption{
        line-height: 0.40rem;
    }

</style>
